import { cn } from "common-web";
import { type JSX, splitProps } from "solid-js";
import theme from "@/common/theme";

export type InputSize = "sm" | "md" | "lg";

type InputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size"> & {
  size?: InputSize | undefined;
};

export default function Input(props: InputProps) {
  const [p, rest] = splitProps(props, ["size", "class"]);

  const sizeClass = () => {
    switch (p.size) {
      case "sm":
        return "px-2 py-1 h-8  text-sm";
      case "lg":
        return "px-4 py-2 h-12 text-lg";
      default:
        return "px-4 py-2 h-10 text-sm";
    }
  };

  return (
    <input
      class={cn(
        "border",
        theme.borderColor,
        theme.borderRadius,
        "hover:outline-2 hover:outline-gray-300",
        "focus:outline-2 focus:outline-gray-300 focus:border-gray-300",
        theme.shadow,
        sizeClass(),
        p.class,
      )}
      {...rest}
    />
  );
}
